<template>
	<view>
		<view class="list-container">
			<!-- 检查信息 -->
			<view class="item">
				<view class="top-label" @click="retract(0)">
					<view>检查信息</view>
					<view v-if="showBasicInformation[0].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[0].show">
					<view class="row">
						<view class="title">检查地点:</view>
						<view class="con">{{ form.schoolName }}</view>
					</view>
					<view class="row">
						<view class="title">指标名称:</view>
						<view class="con">{{ form.headmasterName }}</view>
					</view>
					<view class="row">
						<view class="title">检查日期:</view>
						<view class="con">{{ form.schoolNature }}</view>
					</view>
					<view class="row">
						<view class="title">检查人:</view>
						<view class="con">{{ form.feedingMode }}</view>
					</view>
				</view>
			</view>
			<!-- 检查内容 -->
			<view class="item">
				<view class="top-label" @click="retract(1)">
					<view>检查内容</view>
					<view v-if="showBasicInformation[1].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[1].show">
					<view v-for="(item, index) in checkList" :key="index">
						<view class="row">
							<view class="title1">{{ index + 1 }}</view>
							<vies class="label-index">{{ item.name }}</vies>
							<view class="annotation" v-if="item.isAnnotation" @click="annotationShow(index)">批注详情</view>
						</view>
						<view v-if="isActive === index">
							<textarea v-model="value" height="100" placeholder="请输入" class="text-area"></textarea>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查图片 -->
			<view class="item">
				<view class="top-label" @click="retract(2)">
					<view>检查图片</view>
					<view v-if="showBasicInformation[2].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[2].show">
					<view class="img-all">
						<view v-for="(item, index) in imgList" :key="index" @click="onPreviewImage(item, index)">
							<image :src="item.url" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查记录单 -->
			<view class="item">
				<view class="top-label" @click="retract(3)">
					<view>检查记录单</view>
					<view v-if="showBasicInformation[3].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="info" v-if="showBasicInformation[3].show">
					<view class="img-all">
						<view v-for="(item, index) in imgList" :key="index" @click="onPreviewImage(item, index)">
							<image :src="item.url" class="img"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 检查情况补充 -->
			<view class="item">
				<view class="top-label" @click="retract(4)">
					<view>检查情况补充</view>
					<view v-if="showBasicInformation[4].show"><uv-icon name="arrow-down" size="40rpx" color="#000000"></uv-icon></view>
					<view v-else><uv-icon name="arrow-right" size="40rpx" color="#000000"></uv-icon></view>
				</view>
				<view class="content-item" v-if="showBasicInformation[4].show" style="margin-left: 10rpx;">日常晨检: 消毒-餐具、厨具消毒: 食品添加剂使用贮存:</view>
			</view>
			<!-- 是否需要整改 -->
			<view class="item">
				<view class="zheng-gai">
					<view class="top-label">
						<view>是否需要整改</view>
						<view style="color: #949494;font-size: 28rpx;">是</view>
					</view>
					<view class="zheng-gai-zi">整改意见：</view>
					<view class="content-item">以上检查出的1项问题由长春市教育局负责督促整改验收，学校于2024-01-23 前完成整改并上报。</view>
				</view>
			</view>
			<!-- 检查人签名 -->
			<view class="item">
				<view class="top-label">
					<view>检查人签名</view>
					<view>签名</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
const showBasicInformation = reactive([{ show: true }, { show: true }, { show: true }, { show: true }, { show: true }]);
const value = ref('里是一段文字主要描述食材平台采购情况的详细信息');
// const imgList = ref([{}, {}]);
// 检查信息
const form = ref({
	schoolName: '长春第一实验幼儿园',
	headmasterName: '去过问',
	schoolNature: '公办',
	feedingMode: '自有食堂',
	cafeteriaName: '长春市第一幼儿园食堂',
	canteenPerson: '张哈哈'
});
const imgList = ref([{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }, { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }, { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }]);
// 检查内容列表
const checkList = [
	{ name: '燃气燃油', isAnnotation: true },
	{ name: '燃气燃油', isAnnotation: false },
	{ name: '燃气燃油', isAnnotation: true }
];
const isActive = ref(-1);
function retract(index) {
	showBasicInformation[index].show = !showBasicInformation[index].show;
}
// 批注详情点击
function annotationShow(index) {
	if (isActive.value === index) {
		isActive.value = -1;
	} else {
		isActive.value = index;
	}
}
let onPreviewImage = (item, index) => {
	let photoList = imgList.value.map((item) => {
		return item.url;
	});
	console.log('listslists', photoList);
	uni.previewImage({
		// 先filter找出为图片的item，再返回filter结果中的图片url
		urls: photoList,
		current: index
	});
};
</script>

<style lang="scss" scoped>
@import '@/static/css/dailycheck/viewIndex.scss';
</style>
